<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>申请类型统计</title>
    <link rel="stylesheet" href="${ctxPath}/static/layui/css/layui.css" media="all">

</head>
<body style="background-color: #F2F2F2;" >
<div style="padding: 20px; ">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">申请种类统计</div>
                <div class="layui-card-body">
                <div id="main" style="height: 500px"></div>

                </div>
            </div>
        </div>
    </div>
</div>




<script src="${ctxPath}/static/layui/layui.js"></script>
<script src="${ctxPath}/static/js/echarts5.2.2.min.js"></script>

<script>
    layui.use(['table','form','jquery','laydate'], function(){
        var table = layui.table;
        var form=layui.form;
        var $=layui.$;
        var layer=layui.layer;
        var laydate=layui.laydate;

        //获取统计信息
        $.ajax({
            type:"post",
            url: "${request.contextPath}/api/getStatistics",
            contentType:'application/json',
            // data: JSON.stringify(data.field),
            success: function(res) {
                console.log("=====success=====")
                console.log(res)
                if(res.code===200){

                    //获取要渲染的div
                    var chartDom = document.getElementById('main');
                    //初始化echarts
                    var myChart = echarts.init(chartDom);
                    var option;
                    //设置图表类型
                    option = {
                        xAxis: {
                            type: 'category',
                            data: ['一一类型', '一二类型', '一三类型', '二一类型', '二二类型', '二三类型']
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [
                            {
                                data: res.data,
                                type: 'bar',
                                showBackground: true,
                                backgroundStyle: {
                                    color: 'rgba(180, 180, 180, 0.2)'
                                }
                            }
                        ]
                    };
                    option && myChart.setOption(option);


                }
            },
            error: function(res) {
                layer.alert(res.msg,{icon:2})
            }
        })



    });

</script>

</body>
</html>